<template>
  <div class="radioCard">
    <div class="title">
      <h2>{{title}}·电台</h2>
      <div class="more">
        更多&gt;
      </div>
    </div>
    <ul class="radioList">
      <li class="item" v-for="item in radioList" :key="item.id">
        <img class="radioImg" :src="item.picUrl" :alt="item.name">
        <div class="content">
          <h3>{{item.name}}</h3>
          <div class="uesrInfo">
            <img class="userImg" :src="item.dj.avatarUrl" :alt="item  .dj.nickname">
            <span>{{item.dj.nickname}}</span>
          </div>
          <div class="other">
            <span>共{{item.programCount}}期</span>
            <span>订阅{{item.subCount}}次</span>
          </div>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'RadioCard',
  props: ['radioList', 'title']
}
</script>

<style lang="less" scoped>
.radioCard{
  padding: 10px 40px;
  .title{
    overflow: hidden;
    // background-color: aqua;
    // padding: 10px;
    width: 100%;
    height: 50px;
    line-height: 50px;
    border-bottom: 2px solid #c20c0c;
    h2{
      float: left;
      font-weight: 100;
    }
    .more{
      float: right;
    }
  }
  .radioList{
    width: 100%;
    overflow: hidden;
    .item{
      float: left;
      width: 45%;
      margin: 10px 2.5%;
      // background-color: aqua;
      padding: 10px 0;
      border-bottom: 1px solid #e7e7e7;
      .radioImg{
        // display: block;
        float: left;
        width: 30%;
        height: 138px;
      }
      .content{
        width: 60%;
        float: left;
        padding-left: 30px;
        h3{
          padding: 20px 0 10px 0;
          // 做当行shenglue处理
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
        .uesrInfo{
          padding: 10px 0;
          .userImg{
            display: inline-block;
            width: 25px;
            border-radius: 12.5px;
            vertical-align: middle;
            margin-right: 10px;
          }
        }
        .other{
          span{
            margin-right: 10px;
          }
        }
      }
    }
  }
}
</style>
